<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8"/>
        <meta />
        <title>fetch</title>
        <style scoped>
            .box {
                color: red;
                cursor: pointer;
                background-color: aqua;
                padding: 10px;
            }

            .box:hover {
                opacity: 0.6;
            }

            .say {
                cursor: pointer;
                display: flex;
                align-items: center;
                background-color: thistle;
                padding: 10px;
                gap: 20px;
            }

            .weather-box {
                display: flex;
                align-items: center;
                gap: 20px;
            }

            .all {
                cursor: pointer;
                padding: 10px;
                background-color: gainsboro;
            }
        </style>
    </head>

    <body>
        <div class="box" id="box"></div>
        <div class="all" id="all">双色球预测</div>
        <div class="say" id="say">bilibili历史上的今天</div>
        <ol id="say-list"></ol>
    </body>

    <script>
        const box = document.getElementById('box')
        const say = document.getElementById('say')
        const sayList = document.getElementById('say-list')
        const allDom = document.getElementById('all')
        const WEATHER_API = 'https://uapis.cn/api/weather?name=长沙市'
        const SAY_API = 'https://uapis.cn/api/hotlist?type=bilibili'
        const LOGO_API = 'https://uapis.cn/api/imgapi/bq/youshou.php'
        const RANDOM_API = 'https://uapis.cn/api/sjsz'

        fetch(WEATHER_API).then((res) => res.json()).then((response) => {
            const { province, city, weather, wind_power } = response
            box.innerHTML = `<div class='weather-box'>
                <span>地点：${province}省 ${city}</span>
                <span>天气：${weather}</span>
                <span>风力：${wind_power}级</span>
            </div>`
        })

      async function getLogo() {
        const response = await fetch(LOGO_API)
        return response.blob()
      }
        
      async function getSayText() {
        const response  = await fetch(SAY_API)
        return response.json()
      }

      say.addEventListener('click', async () => {
        const { data } = await getSayText()
        for(let i=0; i<data?.length; i++) {
            const newLi = document.createElement('li')
            newLi.innerText = data[i].desc
            sayList.appendChild(newLi)
        }

        const imgBlob = await getLogo()
        const url = URL.createObjectURL(imgBlob)
        if (url != null) {
            document.body.style.backgroundImage = url
            document.body.style.backgroundPosition = 'center center'
            document.body.style.backgroundSize = '100% 100%'
            // const logo = document.createElement('img')
            // logo.src = url
            // logo.width = 100
            // logo.height = 100
            // say.appendChild(logo)
        }
      })

      allDom.addEventListener('click', async () => {
        const p1 = await fetch(RANDOM_API)
        const p2 = await fetch(RANDOM_API)
        const p3 = await fetch(RANDOM_API)
        
        const [res1, res2, res3] = await Promise.all([p1, p2, p3])
        const random1 = await res1.json()
        const random2 = await res2.json()
        const random3 = await res3.json()

        allDom.innerHTML = `<div>本期双色球预测：${random1.numbers?.[0]} ${random2.numbers?.[0]} ${random3.numbers?.[0]}</div>`
      })

    </script>
</html>